<template>
    <div class="history">
        <van-nav-bar
        title="浏览历史"
        left-arrow
        @click-left="$router.back()"
        fixed
        placeholder
        />
        <div>
            <ul v-for="item in history" :key="item._id" >
                <router-link :to="{path:'/article',query:{'id':item._id,'text':item.title}}">
                    <li>
                        <van-image class='one'
                        fit="cover"
                        :src=item.imageSrc[0] />
                    </li>
                </router-link>
                    <li>
                        <p>{{item.title}}</p>
                        <p>{{item.author}}</p>
                        <p>
                            <em>
                                <svg class="tt-icon" aria-hidden="true">
                                    <use xlink:href="#icon-dianji"></use>
                                </svg>
                                <span> {{item.comment}}</span>
                            </em>
                            <em>
                                <svg class="tt-icon" aria-hidden="true">
                                    <use xlink:href="#icon-huifu1"></use>
                                </svg>
                                <span> {{item.comment}}</span>
                            </em>
                            <em>
                                <svg class="tt-icon" aria-hidden="true" >
                                    <use xlink:href="#icon-gengduo"></use>
                                </svg>
                            </em>
                        </p>
                    </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { Image as VanImage} from 'vant';

// import { Toast } from 'vant';
export default {
    name: 'WorkspaceJsonCollect',
    components:{
        [VanImage.name]:VanImage,
    },
    data() {
        return {
            history:[],
            showShare: false,
            article_id:null,
            index:null,
            options:[
            [
                { name: '微信', icon: 'wechat' },
                { name: '朋友圈', icon: 'wechat-moments' },
                { name: '微博', icon: 'weibo' },
                { name: 'QQ', icon: 'qq' },
            ],
            [{ name: '取消收藏', icon: 'qq' },]
            ]
                
        };
    },

    mounted() {
        this.gethistory()
    },

    methods: {
        // 历史记录
        gethistory(){
            let uid=localStorage.getItem('uid')
            this.$http.post('/api/get_user_article_list',{
                uid,
                skip:'0',
                limit:'10'
            })
            .then(res=>{
               if(res.code==0){
                 this.history=res.data
                 console.log(this.history);
               }
            })
        },
    },
};
</script>

<style lang="scss" scoped>
.history{
    padding: 0 15px;
}
div{
    margin-top: 2vw;
    ul{
        a{
            display: contents;
        }
        display: flex;
        li{
          width: 42vw;
            .one{
                height: 26vw;
                width: 38vw;
                img{
                width: 90vw;
                height: 90vw;
                }
          } 
          p{
            margin-top: 12px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            
          }
          p:nth-child(1){
            font-size: 16px;
          }
          p:nth-child(2){
            color: #9d9d9d;
            font-size: 14px;
            width: 36vw;
          }
          p:nth-child(3){
            display: flex;
            em{
                flex: 3;
                color: #9d9d9d;
                font-size: 14px;
                span{
                    font-size: 17px;
                }
                .tt-icon{
                    font-size: 21px;
                }
            }
            em:nth-child(3){
                text-align: right;
            }
          }
          
        }
    }
}
</style>